<template>
  <div id="cart">
    <nav-bar class="nav-bar" ><div slot="center"> 购物车({{cartLength}})</div></nav-bar>
    <cart-list :cartlist="cartList"></cart-list>
		<cartBottom></cartBottom>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar.vue"
  
  import cartList from "./childComps/CartList.vue"
	import cartBottom from "./childComps/CartBottom.vue"
  // 导入mapGetters辅助函数
  import { mapGetters } from "vuex"
  
  export default {
    name: "Cart",
    components:{
      NavBar,
      cartList,
			cartBottom
    },
    computed:{
      // 将mapGetters函数展开获取方法
      ...mapGetters(["cartLength","cartList"])
    }
  }
</script>

<style scoped>
.nav-bar{
  background-color: var(--color-tint);
  color: #fff;
}
</style>
